<template>
  <je-modal
    v-model:visible="visible"
    width="1000px"
    :title="title"
    height="auto"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="handleOk"
    @close="handleClose"
  >
  </je-modal>
</template>

<script>
  import { toRefs, reactive, defineComponent } from 'vue';
  import { Modal } from '@jecloud/ui';

  export default defineComponent({
    name: 'FieldEvent',
    components: {
      JeModal: Modal,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      recordData: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['changeModal'],
    setup(props, { emit }) {
      const state = reactive({
        visible: props.visble,
        title: '字段事件',
      });

      const methods = {
        handleClose() {
          state.visible = false;
          emit('changeModal', { visible: false });
        },

        handleOk({ button }) {
          button.loading = true;

          setTimeout(() => {
            state.visible = false;
            emit('changeModal', { type: 'refreshData', visible: false });

            button.loading = false;
          }, 3000);
          return false;
        },
      };
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style lang="less" scoped></style>
